<template>
    <div class="setting_page">
        <div class="info_block">
            <div class="block_title">基本信息</div>
            <ul class="list">
                <li class="avatar">
                    <div class="title">头像</div>
                    <div class="content">
                        <el-avatar :src="user.avatar">{{ user.name.substr(0,1) }}</el-avatar>
                    </div>
                </li>
                <li>
                    <div class="title">账号</div>
                    <div class="content">{{ user.name }}</div>
                </li>
                <li>
                    <div class="title">姓名</div>
                    <div class="content">{{ user.realName || '-' }}</div>
                </li>
                <li>
                    <div class="title">证件号</div>
                    <div class="content">{{ user.idNumber || '-' }}</div>
                </li>
                <li>
                    <div class="title">创建时间</div>
                    <div class="content">{{ user.createdAt | parseTime }}</div>
                </li>
            </ul>
        </div>
        <div class="info_block">
            <div class="block_title">账户设置</div>
            <ul class="list">
                <li>
                    <div class="title">手机号</div>
                    <div class="content">{{ user.phone || '-' }}</div>
                </li>
                <li>
                    <div class="title">邮箱</div>
                    <div class="content">{{ user.email || '-' }}</div>
                </li>
                <li>
                    <div class="title">微信</div>
                    <div class="content" v-if="user.openid">{{ user.nickName || '-' }}</div>
                    <div class="content" v-else>
                        <el-link :underline="false">
                            <icon-svg icon="weixin"></icon-svg>
                            绑定
                        </el-link>
                    </div>
                </li>
            </ul>
        </div>
        <div class="info_block">
            <div class="block_title">密码设置</div>
            <ul class="list">
                <li>
                    <div class="title">手机号</div>
                    <div class="content">{{ user.phone || '-' }}</div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    import {mapGetters} from 'vuex'

    export default {
        name: "setting",
        data() {
            return {};
        },
        computed: {
            ...mapGetters(['user']),
        },
    }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
    .setting_page {
        .info_block {
            li.avatar {
                height: 65px;
                position: relative;
                padding-left: 66px;

                .title {
                    position: absolute;
                    height: 55px;
                    line-height: 55px;
                    left: 0;
                }

                .content {
                    height: 55px;
                    padding: 5px 0;
                }

                .el-avatar {
                    width: 55px;
                    height: 55px;
                    line-height: 55px;
                }
            }

            li {
                height: 35px;
                line-height: 35px;

                .title, .content, .option {
                    display: inline-block;
                }

                .title {
                    width: 66px;
                    color: #666;
                }
            }
        }
    }
</style>
